<template>
  <div class="category">
    <router-link to="/list/all" style="color: #fff;">
      <div>
        <i class="fi fi-rr-home"></i>
        首页
      </div>
    </router-link>
    <router-link :to="'/list/' + item.title" v-for="(item, index) in categories" :key="index" style="color: #fff;">
      <div>
        <i class="fi fi-rr-category"></i>
        {{ item.title }}
      </div>
    </router-link>
    <router-link to="/tags" style="color: #fff;">
      <div>
        <i class="fi fi-rs-tags"></i>
        标签
      </div>
    </router-link>
    <router-link to="/resources" style="color: #fff;">
      <div>
        <i class="fi fi-rr-share-alt-square"></i>
        资源
      </div>
    </router-link>
    <router-link to="/archives" style="color: #fff;">
      <div>
        <i class="fi fi-rs-box"></i>
        归档
      </div>
    </router-link>
    <router-link to="/about" style="color: #fff;">
      <div>
        <i class="fi fi-rs-info"></i>
        关于
      </div>
    </router-link>
    <router-link to="" style="color: #fff;">
      <div>
        <el-icon>
          <SvgIcon icon-class="icon-wechat" />
          <!-- <svg t="1706261750457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1598" width="200" height="200"><path d="M902.4 704c-6.4-9.6-6.4-19.2 0-28.8 41.6-57.6 60.8-124.8 60.8-195.2 0-92.8-38.4-179.2-105.6-246.4-67.2-64-156.8-99.2-249.6-96-96 3.2-185.6 48-246.4 121.6h-12.8c-76.8-3.2-150.4 25.6-204.8 76.8-54.4 54.4-86.4 124.8-86.4 201.6 0 57.6 16 112 51.2 160 3.2 6.4 3.2 12.8 0 16l-25.6 32c-9.6 12.8-12.8 38.4-6.4 54.4s22.4 32 38.4 32h224c48 0 92.8-12.8 134.4-35.2 44.8 22.4 96 35.2 150.4 35.2h278.4c19.2 0 35.2-16 41.6-35.2 6.4-16 6.4-38.4-6.4-51.2L902.4 704z m-563.2 64H160c22.4-32 22.4-70.4 3.2-99.2-25.6-35.2-38.4-83.2-38.4-128 0-60.8 22.4-115.2 67.2-156.8 35.2-35.2 80-54.4 131.2-60.8 0 0 0 3.2-3.2 3.2-3.2 6.4-6.4 16-9.6 25.6 0 3.2-3.2 6.4-3.2 6.4-3.2 9.6-6.4 19.2-9.6 32v6.4c-6.4 6.4-9.6 16-9.6 25.6v9.6c0 9.6-3.2 22.4-3.2 32v44.8c0 3.2 0 9.6 3.2 12.8 0 9.6 3.2 19.2 6.4 28.8 0 6.4 3.2 9.6 3.2 16 3.2 9.6 6.4 19.2 9.6 25.6 3.2 6.4 3.2 9.6 6.4 16 3.2 9.6 6.4 16 12.8 25.6 3.2 3.2 3.2 9.6 6.4 12.8 6.4 9.6 12.8 19.2 19.2 25.6 3.2 3.2 3.2 6.4 6.4 9.6 9.6 12.8 19.2 22.4 28.8 32 3.2 3.2 6.4 3.2 6.4 6.4 6.4 6.4 12.8 19.2 19.2 25.6-25.6 12.8-48 22.4-73.6 22.4z m284.8 0c-48 0-92.8-19.2-134.4-41.6v-3.2c-22.4-12.8-44.8-28.8-60.8-48-54.4-54.4-83.2-128-80-208 3.2-57.6 22.4-108.8 57.6-156.8 51.2-67.2 128-108.8 208-108.8 76.8-3.2 147.2 25.6 201.6 76.8 54.4 51.2 86.4 124.8 86.4 198.4 0 57.6-16 112-51.2 160-22.4 32-22.4 83.2 3.2 115.2l9.6 16h-240z" fill="" p-id="1599"></path><path d="M281.6 464z" fill="" p-id="1600"></path></svg> -->
        </el-icon>
        <i class="fi fi-brands-github"></i>
      </div>
    </router-link>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import SvgIcon from '@/components/svgicon.vue'

// import wechatIcon from '@/assets/wechat.svg'
import { Category, PageResType } from '@/types/index'
import { findCategories } from '@/api/index'

const categories = ref<Category[]>([])

onMounted(async () => {
  const response: PageResType<Category> = await findCategories()
  if (response.count > 0) {
    categories.value = response.results!
  }
})

</script>

<style>
.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.category a {
  color: #fff;
  margin-top: 0;
}

.category div i {
  font-size: 1.5rem;
  margin-right: 8px;
}

.category div {
  font-size: 2rem;
}

.category a:last-child {
  font-size: 2rem;
  margin-top: 32px;
}
</style>
